<template>
	<view>
		<view style="font-size: 14px;">
			<dropdown-filter :filterData='filterData' :defaultIndex='defaultIndex' @onSelected='onSelected'></dropdown-filter>
		</view>
		<view class="content">
			<scroll-view scroll-y="true" class="scroll-height">
				<view class="conItem" v-for="(item, index) in dataList" :key="index" @tap="goItem(item)">
					<view class="conItemTitle">
						{{item.workContent}}
					</view>
					<view class="wkcoline">
						<view class="wkno">{{item.wtNo}}</view>
						<view class="wktype">{{item.wtTypeId | codeFormat(typeOptions, 'wtTypeName', 'wtTypeId')}}</view>
						<view class="wkstate">{{item.state | codeFormat(stateOptions, 'name', 'key')}}</view>
					</view>
					<view class="styline">
						<view class="wktap">{{$t('equipment.common.devName')}}</view>
						<view class="wktapcont">{{item.locaName}}</view>
						<view class="wktapman">{{item.operationDeptName}}</view>
					</view>
					<view :class="item.planStartTime&&item.planEndTime ? 'styline' : 'styline stylineEnd'">
						<view class="wktap">{{$t('ticket.roleType.workManagerUser')}}</view>
						<view class="wktapcont">{{item.workDeptName}}</view>
						<view class="wktapman">{{item.managerName}}</view>
					</view>
					<view class="styline stylineEnd" v-if="item.planStartTime&&item.planEndTime">
						<view class="wktap">{{$t('ticket.other.planTime')}}</view>
						<view class="wktapcontDate">{{item.planStartTime}} - {{item.planEndTime}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	import { findByTypeKey } from '@/api/platform/common.js'
	import { getWorkTicketType, getWorkTicketByRelateId, getWtTypePageById } from '@/api/business/ticket.js'
	import { tt as constants} from '@/utils/business/constants.js'

	export default {
		data() {
			return {
				stateOptions: [],
				typeOptions: [],
				filterData: [
					[{
						text: this.$t('ticket.common.workTicketsType'),
						value: null
					}],
					[{
						text: this.$t('common.field.deptAlias'),
						value: null
					}],
					// [{text: '状态', value: '' }]
				],
				defaultIndex: [0, 0],
				dataList: [],
				filterForm: {
					operationDeptId: null,
					state: null,
					wtTypeId: null
				},
				relateXdjTaskId: ''
			}
		},
		onLoad(option) {
			this.relateXdjTaskId = option.relateXdjTaskId
			this.init()
		},
		methods: {
			async init() {
				//场站
				uni.getStorageSync("stationList").forEach(item => {
					this.filterData[1].push({
						text: item.name,
						value: item.id
					})
				})
				this.isShow = true

				//工作票类型
				await getWorkTicketType().then(res => {
					uni.setStorageSync("wtTypeList", res.data.records)
					this.typeOptions = res.data.records
					res.data.records.forEach(item => {
						if (item.isOn == 1 && item.isMain == 1) {
							this.filterData[0].push({
								text: item.wtTypeName,
								value: item.wtTypeId,
							})
						}
					})
				})

				// 工作票状态
				this.stateOptions = []
				await findByTypeKey({ typeKey: "lpywzt" }).then(res => {
					this.stateOptions = res.data
					this.stateOptions.push.apply(this.stateOptions, constants.commonState)
				})

				this.getDataList()
			},
			onSelected(val) {
				this.filterForm.operationDeptId = val[1][0].value
				this.filterForm.wtTypeId = val[0][0].value
				//this.filterForm.state = val[2][0].value
				this.dataList = []
				this.getDataList()
			},
			getDataList() {
				let params = {
					relateXdjTaskId: this.relateXdjTaskId,
					wtTypeId: this.filterForm.wtTypeId,
					operationDeptId: this.filterForm.operationDeptId
				}
				getWorkTicketByRelateId(params).then(res=>{
					this.dataList = res.data
				})
			},
			async goItem(item) {
				let pages = await getWtTypePageById(item.wtTypeId)
				let url = pages.data.find(r => r.pageType == 'add').appPageUrl
				let type = "view"; //默认查看
				uni.navigateTo({
					url: url + '?id=' + item.wtId + '&wtTypeId=' + item.wtTypeId + "&type=" + type
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		font-size: 12px;
	}

	.content {
		padding-top: 25px;
		width: 100%;
		background-color: #F1F1F1;
	}

	.scroll-height {
		/* #ifdef APP-PLUS */
		height: calc(100vh - 70px);
		/* #endif*/

		/* #ifdef H5 */
		height: calc(100vh - 110px);
		/* #endif*/
	}

	.conItem {
		padding: 8px;
		background-color: #ffffff;
		border-radius: 10px;
		margin-bottom: 10px;
	}

	.conItemTitle {
		font-size: 16px;
		padding: 8px;
		padding-right: 0;
		line-height: 16px;
	}

	.wkcoline {
		display: flex;
		border-bottom: solid 1px #e7e7e7;
		padding-bottom: 8px;
		font-size: 12px;
	}

	.wkno {
		width: 40%;
		padding-left: 8px;
		color: #666666;
	}

	.wktype {
		width: 30%;
		color: #666666;
	}

	.wkstate {
		width: 30%;
		text-align: right;
		color: #f65656;
	}

	.styline {
		display: flex;
		margin-left: 8px;
		margin-right: 8px;
		padding-top: 10px;
		border-bottom: solid 1rpx #e7e7e7;
		padding-bottom: 8px;
		font-size: 12px;
	}

	.stylineEnd {
		border: none;
	}

	.stylinePrint {
		border: none;
		padding-bottom: 0;
		padding-top: 0;
	}

	.printbtn {
		width: 100%;
	}

	.wktap {
		width: 20%;
		color: #999999;
	}

	.wktapcont {
		width: 60%;
		color: #666666;
	}

	.wktapman {
		width: 25%;
		color: #666666;
		text-align: right;
	}

	.wktapcontDate {
		width: 80%;
		color: #666666;
	}
</style>
